<template>
    <div class="container">
        <!-- 文章主信息 -->
        <Card style="width:890px" class="article">
            <Input class="news_title" v-model="news_title" placeholder="文章标题" clearable></Input>
            <div class="news_content" ref="editor" style="text-align:left"></div>
        </Card>
        <!-- 文章其他信息 -->
        <Card style="width:300px" class="info">
            <p slot="title">
                <Icon type="ios-paperplane-outline"></Icon>
                文章信息
            </p>
            <span class="belone_menu_uid label">目录：</span>
            <Cascader :data="menuData" v-model="menu"></Cascader>


            <span class="news_author label">作者：</span>
            <Input class="news_author_input input" v-model="news_author" placeholder="文章作者" clearable></Input>

            <span class="news_describe label">简介：</span>
            <Input class="news_describe_input input" v-model="news_describe" type="textarea" :autosize="{minRows: 3}" placeholder="文章简介,如果未填写则抓取正文前50个文字"
                clearable></Input>

            <span class="news_file1 label">封面：</span>
            <Upload class="news_file1_input input" type="drag" name="news" action="$api/api/upload/news" :on-success="uploadSuccess"
                :on-error="uploadError">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或拖拽图片到此上传</p>
                </div>
            </Upload>
        </Card>
        <Button class="submit" type="primary" @click="submit">发布</Button>
    </div>
</template>
<script>
    import E from 'wangeditor'
    export default {
        name: 'editor',
        data() {
            return {
                editor: '',

                menuData: [],
                menu: [],

                uid: 0,
                news_title: '',
                news_content: '',
                news_author: '',                
                news_describe: '',
                news_file1: '',
                belone_menu_uid: '',
                belone_top_menu_uid: ''
            }
        },
        methods: {
            /**
            @function 上传更新 
            */
            submit: function () {
                this.news_describe = this.news_describe == '' ? this.editor.txt.text().substr(0, 50) : this.news_describe                
                let that = this
                this.$axios.post(this.$api+'/api/admin/pageUpdate', {
                        'uid': that.uid,
                        'belone_menu_uid': that.belone_menu_uid,
                        'belone_top_menu_uid': that.belone_top_menu_uid,
                        'news_title': that.news_title,
                        'news_author': that.news_author,
                        'news_content': that.news_content,
                        'news_describe': that.news_describe,
                        'news_file1': that.news_file1
                    }, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                                                
                        if (response.data.state>0) {
                            that.$Notice.success({
                                title: '发布成功',
                                desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                            });
                        } else {
                            that.$Notice.error({
                                title: '发布失败',
                                desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                            });
                        }
                    })
                    .catch(function (response) {
                        
                        that.$Notice.error({
                            title: '发布失败',
                            desc: true ? '' : 'Here is the notification description. Here is the notification description. '
                        });
                    })
                /* alert(this.news_content) */
            },
            /**
             *@function 上传成功触发的回调行数
             *@param {Object} response 上传成功返回的服务器回调数据
             *@param {Object} file 当文件为一个的时候存在，为文件信息
             *@param {Object} file 当文件为多个的时候存在，为文件信息数组
             *@description 使用iview 的上传文件，参考文档https://www.iviewui.com/components/upload
             */
            uploadSuccess: function (response, file, fileList) {
                
                if (response.state == '1') {
                    this.$Message.success('上传成功');
                    this.news_file1 = response.file.store_result
                } else {
                    this.$Message.error('上传失败');
                }
            },
            /**
             *@function 上传失败触发的回调函数
             *@description 使用iview 的上传文件，参考文档https://www.iviewui.com/components/upload
             */
            uploadError: function (error, file, fileList) {
                this.$Message.error('上传失败');
            }
        },
        watch: {
            menu: function () {
                /* 当商品所在目录发生改变的时候，商品所属的目录UID 也要跟着改变 */
                this.belone_menu_uid = this.menu[this.menu.length - 1]
                this.belone_top_menu_uid = this.menu[0]
            },
            news_describe: function(){
                /* 商品简介描述，控制在50个字 */                
                if(this.news_describe.length>50){
                    this.news_describe=this.news_describe.substr(0,50)
                }
            }
        },
        mounted() {
            /* 设置富文本编辑器，使用 wangEditor,使用说明查阅：https://www.kancloud.cn/wangfupeng/wangeditor3/335774*/
            this.editor = new E(this.$refs.editor)
            //配置文章内容存储变量
            this.editor.customConfig.onchange = (html) => {
                this.news_content = html
            }
            //配置图片上传服务器
            this.editor.customConfig.uploadImgServer = this.$api+'/api/upload/editor' //上传地址
            this.editor.customConfig.uploadFileName = 'editor' //上传name
            this.editor.customConfig.uploadImgMaxLength = 1 //上传的最大数量
            //创建富文本编辑器
            this.editor.create()
        },
        created: function () {
            let that = this
            this.$axios.get(this.$api+'/api/admin/MenuGet', {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                .then(function (response) {
                    that.menuData = response.data.menu
                })
            if (this.$route.query.uid) {
                this.$axios.get(this.$api+'/api/page?uid=' + that.$route.query.uid, {
                        headers: {
                            'Access-Control-Request-Method': 'Origin'
                        },
                        withCredentials: true
                    })
                    .then(function (response) {
                        ;
                        that.news_title = response.data.detail.detail.news_title
                        that.news_content = response.data.detail.detail.news_content
                        that.news_file1 = response.data.detail.detail.news_file1
                        that.uid = response.data.detail.detail.uid
                        that.news_author = response.data.detail.detail.news_author                        
                        that.news_describe = response.data.detail.detail.news_describe
                        that.editor.txt.html(that.news_content)

                        let menu = response.data.detail.breadcrumb.reverse()
                        menu.forEach(element => {
                            that.menu.push(element.uid)
                        });
                    })
                    .catch(function (response) {
                        
                    })
            }
        }
    }
</script>
<style lang="less" scoped>
    .container {
        width: 1200px;
        margin: 20px auto;
        .article {
            float: left;
            margin-right: 10px;
            .news_content {
                margin: 20px auto;
            }
        }
        .info {
            float: left;
            .label {
                height: 32px;
                line-height: 32px;
                width: 30%;
                display: inline-block;
            }
            .input {
                width: 100%;
                display: inline-block;
            }
        }
        .submit {
            float: left;
            clear: both;
            width: 200px;
            margin: 20px 500px;
        }
    }
</style>